<template>
	<view class="app-classify-reservation-week ">
		<view class="app-classify-reservation-week__day e-flex">
			<view class="app-classify-reservation-week__day__item text-center fw-500"
				:class="{'is-active':item.date === nowDate}" v-for="(item,index) in week" :key="item.day"
				@tap="handleTapDay(item.date,index)">
				<view>
					<text>{{$t(`cart.${item.text}`)}}</text>
				</view>
				<view>
					<text>{{item.day}}</text>
				</view>
			</view>
			<view class="app-classify-reservation-week__day__line e-flex-xy-center" :style="[lineStyle]">
				<view class="app-classify-reservation-week__day__line-box"></view>
			</view>
		</view>
		<view class="app-classify-reservation-week__time e-flex e-flex-wrap ">
			<view class="app-classify-reservation-week__time__item text-center e-m-b-20"
				:class="{'is-active':index === timeIndex}" @click="handleTimeChange(index)" v-for="(item,index) in time"
				:key="index">
				<text>{{item.beginTime}} - </text>
				<text>{{item.endTime}}</text>
			</view>
		</view>
		<view class="e-p-l-20 e-p-r-20">
			<e-line color="#DFE3E6"></e-line>
		</view>
		<view class="e-p-t-40 e-p-b-40">
			<scroll-view class="app-classify-reservation-week__scroll" scroll-x="true">
				<view class="e-flex e-p-l-20">
					<view class="app-classify-reservation-week__scroll__item" v-for="item in data" :key="item.id"
						@tap.stop="staffsId = item.id">
						<radio class="app-classify-reservation-week__scroll__item-radio" :color="AppSkin.primary"
							:checked="staffsId === item.id" @tap.stop="staffsId = item.id" />
						<image mode="aspectFill" class="app-classify-reservation-week__scroll__item-header"
							:src="item.staffHead ? $fullLink(item.staffHead) :'/pages/classify/static/reservation_default_header.png'">
						</image>
						<view class="bg-white e-p-t-12 text-center">
							<view class="e-m-b-4">
								<text>{{item.staffNickname}}</text>
							</view>
							<view>
								<text class="c-secondary e-font-24">{{item.staffJob}}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, watch, computed } from 'vue'
	import { timeFormat, padZero } from '@/common/utils'
	import { useCurrentInstance } from '@/common/hooks'

	const props = defineProps<{
		data : []
		type : string
	}>()

	const ctx = useCurrentInstance()






	const leftNum = ref(0)
	const timeIndex = ref(0)
	const nowDate = ref('')
	const staffsId = ref('')


	const week = ref((function () {
		const weekTxt = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']

		const date = new Date()

		const arr = [0, 1, 2, 3, 4].map((i) => {
			const obj = {
				text: i == 0 ? '今天' : weekTxt[date.getDay()],
				day: timeFormat(date, 'mm-dd'),
				date: timeFormat(date, 'yyyy-mm-dd')
			}
			date.setDate(date.getDate() + 1)
			return obj
		})
		nowDate.value = arr[0].date
		return arr
	})());

	watch(() => props.data, (v) => {
		if (!staffsId.value && v.length) {
			staffsId.value = v[0].id
		}
	})


	const lineStyle = computed(() => ({
		left: `${leftNum.value * 20}%`
	}))
	const time = computed(() => {

		if (staffsId.value) {
			const item = props.data.find(items => items.id === staffsId.value)
			let nowDay = week.value[leftNum.value].date
			const _time = item?.params?.data.find(day => day.day === nowDay)?.classList || []
			let result_time = _time
			const _date = new Date()
			const yyyy = _date.getFullYear()
			let mm = padZero(_date.getMonth() + 1)
			let dd = padZero(_date.getDate())
			// 如果是当天，过滤超出当前时间的
			if (nowDate.value === `${yyyy}-${mm}-${dd}`) {
				result_time = []
				_time.forEach(item => {
					const endTime = `${yyyy}-${mm}-${dd} ${item.endTime}`
					if (new Date(endTime).getTime() > new Date().getTime()) {
						result_time.push(item)
					}
				})
			}
			return result_time
		}
		return []

	})


	const handleTapDay = (date : string, index : number) => {
		nowDate.value = date
		leftNum.value = index
	}
	const handleTimeChange = (index : number) => {
		timeIndex.value = index
	}
	const getValue = () => {
		if (time.value[timeIndex.value]?.id) {
			return {
				classId: time.value[timeIndex.value].id,
				staffId: staffsId.value,
				wordTime: nowDate.value
			}
		} else {
			ctx.$toastApp(ctx.$t('classify.请选择预约时间'))
			return false
		}

	}

	defineExpose({
		getValue
	})
</script>

<style lang="scss">
	@include appBem_b(classify-reservation-week) {

		@include appBem_e(day) {
			position: relative;

			&__item {
				width: 20%;
				height: 140rpx;
				padding-top: 48rpx;
				color: $base-color-text-secondary;

				@include appWhen(active) {
					color: #333
				}
			}

			&__line {
				position: absolute;
				width: 20%;
				height: 6rpx;
				bottom: 0;
				transition: left .3s;
				overflow: hidden;

				&-box {
					width: 80rpx;
					height: 6rpx;
					background-color: var(--color-primary);
				}
			}
		}

		@include appBem_e(time) {
			padding: 40rpx 20rpx 20rpx 20rpx;

			&__item {
				width: calc((100% - 40rpx)/3);
				margin-right: 20rpx;
				border-radius: 10rpx;
				border: 2rpx solid #DDDDDD;
				padding: 12rpx 0;

				&:nth-child(3n) {
					margin-right: 0;
				}

				@include appWhen(active) {
					border-color: var(--color-primary);
					background-color: var(--bg-primary);
				}
			}
		}

		@include appBem_e(scroll) {
			white-space: nowrap;
			width: 100%;

			&__item {
				position: relative;
				flex: 0 0 180rpx;
				height: 290rpx;
				border-radius: 20rpx 20rpx 0 0;
				margin-right: 20rpx;
				overflow: hidden;

				&-header {
					width: 180rpx;
					height: 180rpx;
				}

				&-radio {
					position: absolute;
					right: 20rpx;
					top: 20rpx;
					z-index: 10;
				}

			}
		}
	}
</style>